/**
 * @fileoverview Navigation template for Coding with Chrome editor.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.ui.Navigation autoescape="strict"}


/**
 * Main HTML template for the Coding with Chrome GUI.
 */
{template .template}
  {@param prefix: string}

  <div id="{$prefix}header">
    {call .header}
      {param prefix: $prefix /}
      {param title: 'Coding with Chrome' /}
    {/call}
  </div>

  <nav id="{$prefix}items" class="mdl-navigation">

    {call .navigationLink_ data="all"}
      {param text: '@@NAVIGATION__HOME' /}
      {param title: '@@NAVIGATION__HOME_TEXT' /}
      {param id: 'home' /}
      {param icon: 'home' /}
    {/call}

    {call .navigationLink_ data="all"}
      {param text: '@@NAVIGATION__OVERVIEW' /}
      {param title: '@@NAVIGATION__OVERVIEW_TEXT' /}
      {param id: 'overview' /}
      {param icon: 'apps' /}
    {/call}

    {call .navigationLink_ data="all"}
      {param text: '@@NAVIGATION__NEW_FILE' /}
      {param title: '@@NAVIGATION__NEW_FILE_TEXT' /}
      {param id: 'new-file' /}
      {param icon: 'add' /}
    {/call}

    {call .navigationLink_ data="all"}
      {param text: '@@NAVIGATION__OPEN_FILE' /}
      {param title: '@@NAVIGATION__OPEN_FILE_TEXT' /}
      {param id: 'open-file' /}
      {param icon: 'open_in_browser' /}
    {/call}

    {call .navigationLink_ data="all"}
      {param text: '@@NAVIGATION__SAVE_AS' /}
      {param title: '@@NAVIGATION__SAVE_AS_TEXT' /}
      {param id: 'save-file' /}
      {param icon: 'save' /}
    {/call}

    {call .navigationLink_ data="all"}
      {param text: '@@NAVIGATION__OPEN_GDRIVE_FILE' /}
      {param title: '@@NAVIGATION__OPEN_GDRIVE_FILE_TEXT' /}
      {param id: 'open-google-drive' /}
      {param icon: 'open_in_browser' /}
    {/call}

    {call .navigationLink_ data="all"}
      {param text: '@@NAVIGATION__SAVE_GDRIVE_FILE' /}
      {param title: '@@NAVIGATION__SAVE_GDRIVE_FILE_TEXT' /}
      {param id: 'save-google-drive' /}
      {param icon: 'save' /}
    {/call}

    {call .navigationLink_}
      {param prefix: $prefix /}
      {param text: 'Open Google Classroom' /}
      {param title: 'Open Google Classroom...' /}
      {param id: 'open-google-classroom' /}
      {param icon: 'apps' /}
    {/call}

    {call .navigationLink_}
      {param prefix: $prefix /}
      {param text: '@@NAVIGATION__EXPORT_TO_GCLOUD' /}
      {param title: '@@NAVIGATION__EXPORT_TO_GCLOUD_TEXT' /}
      {param id: 'export-google-cloud' /}
      {param icon: 'cloud_upload' /}
    {/call}
  </nav>

  <footer class="mdl-mini-footer">
    <div id="{$prefix}footer_left" class="mdl-mini-footer__left-section">

      {call .linkButton_ data="all"}
        {param text: '@@NAVIGATION__ABOUT' /}
        {param title: '@@NAVIGATION__ABOUT_TEXT' /}
        {param id: 'about' /}
      {/call}

    </div>
    <div id="{$prefix}footer_right" class="mdl-mini-footer__right-section">

      {call .iconButton_ data="all"}
        {param icon: 'build' /}
        {param title: '@@NAVIGATION__DEBUG_TEXT' /}
        {param id: 'debug' /}
      {/call}

      {call .iconButton_ data="all"}
        {param icon: 'settings' /}
        {param title: '@@NAVIGATION__SETTINGS_TEXT' /}
        {param id: 'settings' /}
      {/call}

      {call .iconButton_ data="all"}
        {param icon: 'help' /}
        {param title: '@@NAVIGATION__HELP_TEXT' /}
        {param id: 'help' /}
      {/call}

    </div>
  </footer>

{/template}


/**
 * Header template.
 */
{template .header}
  {@param title: string}
  {@param? icon: string}
  {@param? color_class: string}

  <header class="mdl-layout__header{if $color_class} {$color_class}{/if}">
    {msg desc=""}{$title}{/msg}
    {if $icon}<i class="icon_auto">{$icon}</i>{/if}
  </header>

{/template}


/**
 * Navigation link item.
 */
{template .navigationLink_ private="true"}
  {@param prefix: string}
  {@param text: string}
  {@param title: string}
  {@param id: string}
  {@param icon: string}

  <div id="{$prefix}{$id}" class="link_button mdl-navigation__link" title="{msg desc=""}{$title}{/msg}" role="button" tabindex="0">
    {msg desc=""}{$text}{/msg}
    <i class="icon_auto">{$icon}</i>
  </div>
{/template}


/**
 * Navigation text button.
 */
{template .linkButton_ private="true"}
  {@param prefix: string}
  {@param text: string}
  {@param title: string}
  {@param id: string}

  <div id="{$prefix}{$id}" class="link_button" title="{msg desc=""}{$title}{/msg}" role="button" tabindex="0">
    {msg desc=""}{$text}{/msg}
  </div>
{/template}


/**
 * Navigation icon button.
 */
{template .iconButton_ private="true"}
  {@param prefix: string}
  {@param icon: string}
  {@param title: string}
  {@param id: string}

  <div id="{$prefix}{$id}" class="icon_24px icon_button" title="{msg desc=""}{$title}{/msg}" role="button" tabindex="0">
    {$icon}
  </div>
{/template}
